<template>
  <div>
    <a-breadcrumb style="margin: 0px 0px 0px 0px">
          <a-breadcrumb-item>首页</a-breadcrumb-item>
          <a-breadcrumb-item>个人信息</a-breadcrumb-item> 
          <a-breadcrumb-item>看板信息</a-breadcrumb-item>
    </a-breadcrumb>
    <el-card class="card1">
    <el-button @click="show2 = !show2" class="button">看板信息</el-button>
    <div @click="show2 = !show2" style="width:100% height:50px"> </div>
     <div style="display: flex; margin-top: 20px; height: 100px;">
       
     <transition name="el-zoom-in-center">
       <div v-show="show2">  
    <el-card style="margin-top:80px" class="elcard" shadow="hover">
    <a-card class="card2"
       bodyStyle="margin-left:450px"
      :tab-list="tabList"
      :active-tab-key="key"
      @tabChange="key => onTabChange(key, 'key')">
      <span slot="customRender" slot-scope="item"> <a-icon type="home" />{{ item.key }} </span>
      <div>
        <el-badge :value="3" class="item2">
        </el-badge>
        <el-badge :value="5" class="item1">
        </el-badge>
        <a-icon type="clock-circle" class="clock"/>
        <i class="el-icon-mobile-phone"></i>
        <i class="el-icon-s-custom"></i>
        <a-icon type="mail" class="mail"/>
        <a-icon type="pay-circle" class="pay"/>
      </div>
      
      <a slot="extra" href="/login/nav/tree">More</a>
      {{ contentList[key] }}
    </a-card>
    <el-button style="margin-top:10px;margin-left:320px">
      <router-link to="/login/nav/binding">
                绑定
        </router-link>
      </el-button>
      <el-button style="margin-top:10px">
        <router-link to="/login/nav/binding">
                修改绑定
        </router-link>
        </el-button>
      <el-button style="margin-top:10px">
        <router-link to="/login/nav/pay">
                去充值
        </router-link>
      </el-button>
    </el-card>
  </div>
    </transition>
    
     </div>
     </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show2: true,
      tabList: [
        {
          key: 'tab1',
          tab: '用户名',
          scopedSlots: { tab: 'customRender' },
        },
        {
          key: 'tab2',
          tab: '手机号',
        },
        {
          key: 'tab3',
          tab: '邮箱',
        },
        {
          key: 'tab4',
          tab: '账户余额',
        },
        {
          key: 'tab5',
          tab: '已投简历',
        },
        {
          key: 'tab6',
          tab: '未读消息',
        },
        {
          key: 'tab7',
          tab: '上次登录时间',
        },
      ],
      contentList: {
        tab1: '小明',
        tab2: '136xxxxxxxx',
        tab3: '未绑定邮箱',
        tab4: '100元',
        tab5: '5份简历',
        tab6: '3条未读消息',
        tab7: '2016.01.15 9:50',
        
      },
      tabListNoTitle: [
        {
          key: 'article',
          tab: 'article',
        },
        {
          key: 'app',
          tab: 'app',
        },
        {
          key: 'project',
          tab: 'project',
        },
      ],
      key: 'tab1',
      noTitleKey: 'app',
    };
  },
  methods: {
    onTabChange(key, type) {
      console.log(key, type);
      this[type] = key;
    },

  },
};
</script>
<style lang="less" scoped>
.card1{
  height:500px;
  margin-top:20px;
}
.card2{
  background-color: #f1f4f7;
}
.elcard{
  position: relative;
  left:120px;
  width:1000px;
}
.item1{
  position: relative;
  left:58px;
  top:-65px;
}
.item2{
  position: relative;
  left:205px;
  top:-65px;
}
.clock{
  position: relative;
  left:215px;
  top:-60px;
}
.el-icon-mobile-phone{
   position: relative;
   left:-392px;
   top:-60px;
}
.el-icon-s-custom{
  position: relative;
  left:-520px;
  top:-60px;
}
.mail{
  position: relative;
  left:-310px;
  top:-60px;
}
.pay{
  position: relative;
  left:-228px;
  top:-60px;
}
.button{
  position: absolute;
  top:200px;
  left:800px;
}
</style>